<template>
  <div>
    <common class="common"></common>
    <totop class="totop"></totop>
    <selects class="selects"></selects>
    <div class="a">
          <el-row v-for="(Activity ,index ) in ActivityList" :key="index">
            <router-link :to="'/article/'+ Activity.article.id">
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <img :src="Activity.article.topimage_id | Image" alt>
                </div>
              </el-col>
              <div class="title">
                <p v-text="Activity.article.title" class="ng-binding"></p>
                <p v-text="Activity.article.user.nick" class="user-name"></p>
              </div>
            </router-link>
          </el-row>
>
    </div>
    <div class="base">
      <p>@2010-2016 生活,读书，新知三联书店</p>
    </div>
  </div>
</template>
<script>
  import axios from "axios";
  import common from "../components/common"
  import totop from "../components/totop"
  import selects from "../components/select"

  export default {
    data: function () {
      return {
        ActivityList: [],
        dataLength: 0,
        loadingMore: false
      }
    },
    components: {
      common,
      selects,
      totop
    },
    mounted() {
      this.getActivity();
      window.onscroll = this.didscroll;
    },
    methods: {
      getActivity: function () {
        var _this = this;
        var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
        axios
          .get(
            API_Proxy +
            "http://www.songguolife.com/api/home?page=" +
            this.dataLength +
            "&pageSize=20&query=%7B%22method%22:%22GET%22,%22isArray%22:true%7D "
          )
          .then(function (data) {
              _this.ActivityList = data.data;
            }, function (data) {
              // console.log("请求失败");
              // console.log(data);
            }
          );
      },
      didscroll: function () {
        var scrollTop = document.documentElement.scrollTop;
        var contentHeight = document.body.clientHeight;
        var windowHeight = window.innerHeight;
        if (scrollTop + windowHeight > contentHeight - 60) {
          if (this.loadingMore == false) {
            this.loadMorde();
          }
        }
      },
      loadMorde: function () {
        this.status = "loading";
        this.loadingMore = true;
        this.dataLength += 1;
        var _this = this;
        var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
        axios
          .get(
            API_Proxy +
            "http://www.songguolife.com/api/home?page=" +
            this.dataLength +
            "&pageSize=20&query=%7B%22method%22:%22GET%22,%22isArray%22:true%7D "
          )
          .then(
            function (data) {
              _this.ActivityList = _this.ActivityList.concat(data.data);
              _this.loadingMore = false;
            },
            function (data) {
              console.log("请求失败");
              console.log(data);
            }
          );
      }
    }
  };
</script>
<style scoped>
  * {
    box-sizing: border-box;
  }
.a{
  width: 78vw;
  margin: 0 auto;
}
  .el-row {
    margin-bottom: 2vw;
    display: inline-block;
    margin: 0 auto;
  }

  .bg-purple {
    background: #d3dce6;
    margin: 1vw;

  }

  .bg-purple img {
    width: 36.5vw;
    height: 30vw;

  }
  @media screen and (max-width: 1200px) {
    .bg-purple img {
      width: 78vw;
      height: 50vw;
    }
  }

  .title {
    position: absolute;
    color: white;
    bottom: 0;
    left: 20px;
  }

  .ng-binding {
    font-size: 1.3vw;
    font-weight: 550px;
  }

  .user-name {
    font-size: 15px;
  }

  .base {
    text-align: center;
    color: #99a9bf;
  }

  .totop {
    position: sticky;
    top: 0;
    z-index: 900;
  }

  .selects {
    position: sticky;
    top: 50px;
    z-index: 400;
  }
</style>
